import React, { PureComponent } from 'react'

export class App extends PureComponent {
  constructor() {
    super()
    this.state = {
      fruit: '',
      hobbies: ['orange']
    }
  }
  handleChangeInput(e) {
    this.setState({ fruit: e.target.value })
  }
  handleChangeSelect(e) {
    // this.setState({ fruit: e.target.value }) // 这个做法是不行的
    const options = Array.from(e.target.selectedOptions)
    const values = options.map((i) => i.value)
    // 上面两行代码等价于下面这一行
    // const values = Array.from(e.target.selectedOptions, i => i.value)
    this.setState({ hobbies: values })
  }
  handleSubmit() {
    const { fruit, hobbies } = this.state
    console.log(fruit, hobbies)
  }
  render() {
    const { fruit, hobbies } = this.state
    return (
      <div>
        <select value={fruit} onChange={(e) => this.handleChangeInput(e)}>
          <option value="apple">苹果</option>
          <option value="orange">橘子</option>
          <option value="banana">香蕉</option>
        </select>
        <select value={hobbies} onChange={(e) => this.handleChangeSelect(e)} multiple>
          <option value="apple">苹果</option>
          <option value="orange">橘子</option>
          <option value="banana">香蕉</option>
        </select>
        <button onClick={() => this.handleSubmit()}>提交</button>
      </div>
    )
  }
}

export default App